<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .input-group {
            margin-top: 10px;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="return false">
        <div class="input-group">
            <labal>用户名:</labal>
            <input type="text" class="user" name="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp;码:</labal>
            <input type="text" class="pwd" name="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <labal>手机号:</labal>
            <input type="text" class="phone" name="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <labal>邮&emsp;箱:</labal>
            <input type="text" class="email" name="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="注册">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>

<script>
    // 用户名
    // 由数字 字母 下划线 $ 组成, 6-12位,且不能以数字开头
    // (1) 一步到位
    // (2)  拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成

    // 密码：
    //  由数字 字母 下划线 $ 组成, 6-12位，密码强度

    // 手机号
    // 纯数字 11位   以1开头  第二位3-9

    // 邮箱

    // 用户名 密码 手机号 邮箱 格式全都正确 => 跳转百度

    /* var userInp = document.getElementsByClassName("user")[0];
    var pwdInp = document.getElementsByClassName("pwd")[0];
    var phoneInp = document.getElementsByClassName("phone")[0];
    var emailInp = document.getElementsByClassName("email")[0];

    var [userInp, pwdInp, phoneInp, emailInp] = document.querySelectorAll(".user,.pwd,.phone,.email");  // []
    console.log(userInp, pwdInp, phoneInp, emailInp); */

    var form = document.getElementsByTagName("form")[0];

    // form表单 对应name属性的属性值 获取对应的表单元素
    // console.log(form.user);  //对象的属性
    // console.log(form.pwd);
    // console.log(form.phone);
    // console.log(form.email);

    var { user: userInp, pwd: pwdInp, phone: phoneInp, email: emailInp } = document.getElementsByTagName("form")[0];

    console.log(userInp, pwdInp, phoneInp, emailInp);

    // 一步到位
    userInp.onblur = function () {
        var user = userInp.value;

        // 去除所有空格
        user = user.replace(/\s/g, "");
        userInp.value = user;

        // 由数字 字母 下划线 $ 组成, 6-12位,且不能以数字开头

        // var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        // var tipsSpan = this.nextElementSibling;
        // if (reg.test(user)) {
        //     tipsSpan.textContent = "√";
        //     tipsSpan.style.color = "green";
        //     tipsSpan.style.fontSize = "12px";
        // } else {
        //     tipsSpan.textContent = "用户名由数字、字母、下划线、$组成,6-12位,且不能以数字开头";
        //     tipsSpan.style.color = "red";
        //     tipsSpan.style.fontSize = "12px";
        // }

        //  var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        // var tipsSpan = this.nextElementSibling;
        // if (reg.test(user)) {
        //     tipsSpan.textContent = "√";
        //     tipsSpan.classList.remove("error");
        //     tipsSpan.classList.add("right");
        // } else {
        //     tipsSpan.textContent = "用户名由数字、字母、下划线、$组成,6-12位,且不能以数字开头";
        //     tipsSpan.classList.remove("right");
        //     tipsSpan.classList.add("error");
        // } 

        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        var tipsSpan = this.nextElementSibling;
        if (reg.test(user)) {
            tipsSpan.textContent = "√";
            tipsSpan.className = "user_tips right";
        } else {
            tipsSpan.textContent = "用户名由数字、字母、下划线、$组成,6-12位,且不能以数字开头";
            tipsSpan.className = "user_tips error";
        }

    }

    // 拆分版 => 拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成  => 所有的字符都符合这个规则 / 存在不符合规则的字符(找一个)
    userInp.onblur = function () {
        var user = userInp.value;

        // 去除所有空格
        user = user.replace(/\s/g, "");
        userInp.value = user;

        var tipsSpan = this.nextElementSibling;

        var lReg = /^.{6,12}$/; //任意字符 6-12
        var sReg = /^[^0-9]/; //非数字开头
        var zReg = /[^\w$]/; // 存在非法字符

        // 用户名由数字、字母、下划线、$组成,6-12位,且不能以数字开头
        /* if (lReg.test(user)) {

            if (sReg.test(user)) {

                if (!zReg.test(user)) { // !zReg.test(user) === true =>   zReg.test(user) === false  => 不存在非法字符
                    tipsSpan.textContent = "√";
                    tipsSpan.className = "user_tips right";
                } else {
                    tipsSpan.textContent = "用户名由数字、字母、下划线、$组成";
                    tipsSpan.className = "user_tips error";
                }

            } else {
                tipsSpan.textContent = "用户名不能以数字开头";
                tipsSpan.className = "user_tips error";
            }

        } else {
            tipsSpan.textContent = "用户名需要在6-12位之间";
            tipsSpan.className = "user_tips error";
        } */


        // 排除所有的错误 => 剩余的就是对的
        if (!lReg.test(user)) { // 长度有误   lReg.test(user) ===false
            tipsSpan.textContent = "用户名需要在6-12位之间";
            tipsSpan.className = "user_tips error";
        } else if (!sReg.test(user)) { // 开头有问题 => 数字开头  sReg.test(user) === false
            tipsSpan.textContent = "用户名不能以数字开头";
            tipsSpan.className = "user_tips error";
        } else if (zReg.test(user)) { // 存在非法字符 zReg.test(user) === true 
            tipsSpan.textContent = "用户名由数字、字母、下划线、$组成";
            tipsSpan.className = "user_tips error";
        } else {
            tipsSpan.textContent = "√";
            tipsSpan.className = "user_tips right";
        }

    }











</script>

</html>